<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>产品多图展示带放大镜代码 - 站长素材</title>
<link href="css/css.css" type="text/css" rel="stylesheet">	
<SCRIPT src="js/jquery-1.2.6.pack.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/base.js" type=text/javascript></SCRIPT>
</head>

<body>
<div align="center">  
<div id=preview>
	<div class=jqzoom id=spec-n1 onClick="window.open('http://sc.chinaz.com/')"><IMG height=350
	src="images/img04.jpg" jqimg="images/img04.jpg" width=350>
	</div>
	<div id=spec-n5>
		<div class=control id=spec-left>
			<img src="images/left.gif" />
		</div>
		<div id=spec-list>
			<ul class=list-h>
				<li><img src="images/img01.jpg"> </li>
				<li><img src="images/img02.jpg"> </li>
				<li><img src="images/img03.jpg"> </li>
				<li><img src="images/img04.jpg"> </li>
				<li><img src="images/img01.jpg"> </li>
				<li><img src="images/img02.jpg"> </li>
				<li><img src="images/img03.jpg"> </li>
				<li><img src="images/img04.jpg"> </li>
				<li><img src="images/img01.jpg"> </li>
				<li><img src="images/img02.jpg"> </li>
				<li><img src="images/img03.jpg"> </li>
				<li><img src="images/img04.jpg"> </li>
			</ul>
		</div>
		<div class=control id=spec-right>
			<img src="images/right.gif" />
		</div>
		
    </div>
</div>
<SCRIPT type=text/javascript>
	$(function(){			
	   $(".jqzoom").jqueryzoom({
			xzoom:400,
			yzoom:400,
			offset:10,
			position:"right",
			preload:1,
			lens:1
		});
		$("#spec-list").jdMarquee({
			deriction:"left",
			width:350,
			height:56,
			step:2,
			speed:4,
			delay:10,
			control:true,
			_front:"#spec-right",
			_back:"#spec-left"
		});
		$("#spec-list img").bind("mouseover",function(){
			var src=$(this).attr("src");
			$("#spec-n1 img").eq(0).attr({
				src:src.replace("\/n5\/","\/n1\/"),
				jqimg:src.replace("\/n5\/","\/n0\/")
			});
			$(this).css({
				"border":"2px solid #ff6600",
				"padding":"1px"
			});
		}).bind("mouseout",function(){
			$(this).css({
				"border":"1px solid #ccc",
				"padding":"2px"
			});
		});				
	})
	</SCRIPT>

<SCRIPT src="js/lib.js" type=text/javascript></SCRIPT>
<SCRIPT src="js/zzsc.js" type=text/javascript></SCRIPT>  
</div>

<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>